<template>
  <div class="content1">
    <header>
      <div class="page_shuoming">
        <el-header style="height: 110px;background-color: white">
          <div class="permission_text">门店基础设置</div>
          <div class="Breadcrumb"><span>首页</span><span>/</span><span>门店基础设置</span></div>
        </el-header>
      </div>
    </header>
    <div class="table_pad">
      <!--下拉 选择-->
      <div class="">
        <div class="content1-1">
          <table>
            <tr>
              <td>
                <el-select v-model="zongbu_value" @change="select_gongsi" style="width: 200px" placeholder="选择总部">
                  <el-option
                    v-for="item in zongbu"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </td>
              <td>
                <el-select v-model="fendian_value" @change="fendianxuanze" style="width: 200px" placeholder="选择门店">
                  <el-option
                    v-for="item in fendian"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </td>
              <td>
                <el-select v-model="chukuguitai_val" style="width: 200px" placeholder="选择柜台">
                  <el-option
                    v-for="item in chukuguitai"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </td>
              <td>
              </td>
              <td>
                <input type="hidden">
              </td>
              <td>
                <!--<el-button type="primary" @click="" style="margin-left: 20px">点击查看</el-button>-->
                <el-button type="success" @click="openAddzongbu">增加总部</el-button>
              </td>
            </tr>
          </table>
        </div>
      </div>

      <!--查看公司信息-->
      <div class="right-white">

        <!--公司信息-->
        <div class="pop-up">
          <div class="pop-up-header"><h4>公司信息</h4></div>
          <!-- 内容 -->
          <!--<div>
            <table>
              <tr>
                <td>总部编码：<input type="text" disabled="disabled" v-model="headquarters_store_code"></input></td>
                <td>总部名称：<input type="text" disabled="disabled" v-model="headquarters_store_name"></input></td>
                <td>区域：<input type="text" disabled="disabled" v-model="region"></input></td>
                <td>公司状态：<input type="text" disabled="disabled" v-model="headquarters_store_status"></input></td>
                <td>
                  <el-row>
                    <el-button type="primary" @click="dialogTableVisible = true" class="right">编辑</el-button>
                    <el-dialog title="增加/编辑总部信息" :visible.sync="dialogTableVisible" style="text-align: center"
                               width="75%">
                      &lt;!&ndash; 增加/编辑总部信息 模态框-内容 开始&ndash;&gt;
                      <div class="">

                        <div>
                          <table class="motai-kuang">
                            <tr>
                              <td>总部编码：<input type="text" v-model="headquarters_store_code"></input></td>
                              <td>总部名称：<input type="text" v-model="headquarters_store_name"></input></td>
                              <td>区域：<input type="text" v-model="region"></input></td>
                              <td>门店状态：<input type="text" v-model="headquarters_store_status"></input></td>
                            </tr>
                            <tr>
                              <td>联系人：<input type="text" v-model="headquarters_store_contact"></input></td>
                              <td>电话：<input type="text" v-model="headquarters_store_tel"></input></td>
                              <td>传真：<input type="text" v-model="headquarters_store_fax"></input></td>
                            </tr>
                            <tr>
                              <td>省份：<input type="text" v-model="province"></input></td>
                              <td>城市：<input type="text" v-model="city"></input></td>
                              <td>区/镇：<input type="text" v-model="district"></input></td>
                            </tr>
                            <tr>
                              <td>地址：<input type="text" v-model="headquarters_store_adrress" style="width:200px"></input>
                              </td>
                            </tr>
                          </table>
                        </div>
                        <span slot="footer" class="dialog-footer">
                       <el-button @click="dialogTableVisible = false">取 消</el-button>
                       <el-button type="primary" @click="dialogTableVisible = false">确 定</el-button>
                      </span>
                      </div>
                      &lt;!&ndash; 增加/编辑总部信息 模态框-内容 结束&ndash;&gt;

                    </el-dialog>
                  </el-row>
                </td>
              </tr>
              <tr>
                <td>联系人：<input type="text" disabled="disabled" v-model="headquarters_store_contact"></input></td>
                <td>电话：<input type="text" disabled="disabled" v-model="headquarters_store_tel"></input></td>
                <td>传真：<input type="text" disabled="disabled" v-model="headquarters_store_fax"></input></td>
                <td colspan="2" style="text-align: right">
                  <el-row>
                    <el-button type="danger" @click="dialogDelTablelibraryVisible = true">删除</el-button>
                    &lt;!&ndash; 删除总部信息 模态框-内容 开始&ndash;&gt;
                    <el-dialog title="" :visible.sync="dialogDelTablelibraryVisible" style="text-align: center"
                               width="35%">
                      即将删除当前总部信息，是否确定？
                      <span slot="footer" class="dialog-footer">
                       <el-button @click="dialogDelTablelibraryVisible = false">取 消</el-button>
                       <el-button type="primary" @click="dialogDelTablelibraryVisible = false">确 定</el-button>
                      </span>

                    </el-dialog>
                    &lt;!&ndash; 删除总部信息 模态框-内容 结束&ndash;&gt;

                  </el-row>
                </td>
              </tr>
              <tr>
                <td>省份：<input type="text" disabled="disabled" v-model="province"></input></td>
                <td>城市：<input type="text" disabled="disabled" v-model="city"></input></td>
                <td>区/镇：<input type="text" disabled="disabled" v-model="district"></input></td>
                <td colspan="2" style="text-align: right">
                  <el-row>
                    <el-button type="success" @click="addBranchVisible = true">增加分店</el-button>

                  </el-row>
                </td>
              </tr>
              <tr>
                <td colspan="2" style="text-align: left">地址：<input type="text" disabled="disabled"
                                                                   v-model="headquarters_store_adrress"
                                                                   style="width:200px"></input></td>
                <td colspan="3" style="text-align: right">
                  <el-row>
                    <el-button type="warning" @click="dialoglibraryVisible = true">类库管理</el-button>
                    &lt;!&ndash; 新增/编辑类库 模态框-内容 开始&ndash;&gt;
                    <el-dialog title="新增/编辑类库" :visible.sync="dialoglibraryVisible" style="text-align: center"
                               width="35%">
                      &lt;!&ndash; 类库管理  &ndash;&gt;
                      <table align="center">
                        <tr>
                          <td>类库1</td>
                          <td rowspan="2" width="300px" style="margin-left: 0px">总部名称：</td>
                        </tr>
                        <tr>
                          <td>类库2</td>

                        </tr>
                        <tr>
                          <td>类库3</td>
                          <td rowspan="2" width="300px">类库名称：</td>
                        </tr>
                        <tr>
                          <td>类库4</td>

                        </tr>
                        <tr>
                          <td>类库5</td>
                          <td rowspan="2" width="300px">类库状态：</td>
                        </tr>
                        <tr>
                          <td>类库6</td>

                        </tr>
                        <tr>
                          <td>+</td>
                          <el-button @click="dialoglibraryVisible = false">保存</el-button>
                          <el-button @click="dialoglibraryVisible = false">取消</el-button>
                          <el-button @click="dialoglibraryVisible = false">删除</el-button>
                        </tr>
                      </table>

                      &lt;!&ndash;<span slot="footer" class="dialog-footer">&ndash;&gt;
                      &lt;!&ndash;<el-button @click="dialoglibraryVisible = false">取 消</el-button>&ndash;&gt;
                      &lt;!&ndash;<el-button type="primary" @click="dialoglibraryVisible = false">确 定</el-button>&ndash;&gt;
                      &lt;!&ndash;</span>&ndash;&gt;

                    </el-dialog>
                    &lt;!&ndash; 新增/编辑类库 模态框-内容 结束&ndash;&gt;
                  </el-row>
                </td>
              </tr>
            </table>
          </div>-->
          <el-form :model="zongbuxinxi">
            <table class="gongsi_table">
              <tr>
                <td class="shenpi_td_jian">总部编码:</td>
                <td class="shenpi_td_zhi">{{zongbuxinxi.coding}}</td>
                <td class="shenpi_td_jian">总部名称:</td>
                <td class="shenpi_td_zhi">{{zongbuxinxi.name}}</td>
                <td class="shenpi_td_jian">区域:</td>
                <td class="shenpi_td_zhi">{{zongbuxinxi.region}}</td>
              </tr>
              <tr>
                <td class="shenpi_td_jian">门店状态:</td>
                <td class="shenpi_td_zhi">{{zongbuxinxi.storeStatus}}</td>
                <td class="shenpi_td_jian">联系人:</td>
                <td class="shenpi_td_zhi">{{zongbuxinxi.contact}}</td>
                <td class="shenpi_td_jian">电话:</td>
                <td class="shenpi_td_zhi">{{zongbuxinxi.phone}}</td>
              </tr>
              <tr>
                <td class="shenpi_td_jian">传真:</td>
                <td class="shenpi_td_zhi">{{zongbuxinxi.fax}}</td>
                <td class="shenpi_td_jian">省份:</td>
                <td class="shenpi_td_zhi">{{zongbuxinxi.province}}</td>
                <td class="shenpi_td_jian">城市:</td>
                <td class="shenpi_td_zhi">{{zongbuxinxi.city}}</td>
              </tr>
              <tr>
                <td class="shenpi_td_jian">区/镇:</td>
                <td class="shenpi_td_zhi">{{zongbuxinxi.district}}</td>
                <td class="shenpi_td_jian">地址:</td>
                <td class="shenpi_td_zhi">{{zongbuxinxi.address}}</td>
              </tr>
            </table>
            <div class="caozuo">
              <el-button type="success" @click="openAddfendian" size="small">增加分店</el-button>
              <el-button type="primary" @click="openEditzongbu" size="small">编辑</el-button>
              <el-button type="danger" @click="" size="small">删除</el-button>
            </div>
          </el-form>
        </div>

        <!--分店信息 -->
        <div class="pop-up">
          <div class="pop-up-header"><h4>分店信息</h4></div>
          <!-- 框-内容 -->
          <el-form :model="fendianxinxi">
            <table class="gongsi_table">
              <tr>
                <td class="shenpi_td_jian">总部名称:</td>
                <td class="shenpi_td_zhi">{{zongbuxinxi.headquartersName}}</td>
                <td class="shenpi_td_jian">分店编码:</td>
                <td class="shenpi_td_zhi">{{zongbuxinxi.coding}}</td>
                <td class="shenpi_td_jian">门店名称:</td>
                <td class="shenpi_td_zhi">{{zongbuxinxi.name}}</td>
              </tr>
              <tr>
                <td class="shenpi_td_jian">区域:</td>
                <td class="shenpi_td_zhi">{{zongbuxinxi.region}}</td>
                <td class="shenpi_td_jian">门店状态:</td>
                <td class="shenpi_td_zhi">{{zongbuxinxi.storeStatus}}</td>
                <td class="shenpi_td_jian">联系人:</td>
                <td class="shenpi_td_zhi">{{zongbuxinxi.contact}}</td>
              </tr>
              <tr>
                <td class="shenpi_td_jian">电话:</td>
                <td class="shenpi_td_zhi">{{zongbuxinxi.phone}}</td>
                <td class="shenpi_td_jian">传真:</td>
                <td class="shenpi_td_zhi">{{zongbuxinxi.fax}}</td>
                <td class="shenpi_td_jian">省份:</td>
                <td class="shenpi_td_zhi">{{zongbuxinxi.province}}</td>
              </tr>
              <tr>
                <td class="shenpi_td_jian">城市:</td>
                <td class="shenpi_td_zhi">{{zongbuxinxi.city}}</td>
                <td class="shenpi_td_jian">区/镇:</td>
                <td class="shenpi_td_zhi">{{zongbuxinxi.district}}</td>
                <td class="shenpi_td_jian">楼层:</td>
                <td class="shenpi_td_zhi">{{zongbuxinxi.floor}}</td>
              </tr>
              <tr>
                <td class="shenpi_td_jian">地址:</td>
                <td class="shenpi_td_zhi">{{zongbuxinxi.address}}</td>
              </tr>
            </table>
            <div class="caozuo">
              <el-button type="success" @click="dialogFormVisible_addGuitai=true" size="small">增加柜台</el-button>
              <el-button type="primary" @click="openEditfendian" size="small">编辑</el-button>
              <el-button type="danger" @click="" size="small">删除</el-button>
            </div>
          </el-form>
        </div>

        <!--柜台信息-->
        <div class="pop-up">
          <div class="pop-up-header"><h4>柜台信息</h4></div>
          <!-- 内容 -->
          <el-form :model="guitaixinxi">
            <table class="gongsi_table">
              <tr>
                <td class="shenpi_td_jian">门店名称:</td>
                <td class="shenpi_td_zhi">{{zongbuxinxi.storeName}}</td>
                <td class="shenpi_td_jian">柜台名称:</td>
                <td class="shenpi_td_zhi">{{zongbuxinxi.name}}</td>
                <td class="shenpi_td_jian">柜台状态:</td>
                <td class="shenpi_td_zhi">{{zongbuxinxi.status}}</td>
              </tr>
              <tr>
                <td class="shenpi_td_jian">柜台商品品类:</td>
                <td class="shenpi_td_zhi">{{zongbuxinxi.category}}</td>
              </tr>
            </table>
            <div class="caozuo">
              <el-row>
                <el-button type="primary" @click="dialogFormVisible_editGuitai= true" size="small">编辑</el-button>
                <el-button type="danger" @click="" size="small">删除</el-button>
              </el-row>

            </div>
          </el-form>
        </div>

        <!--总部增加弹窗-->
        <el-dialog title="增加总部" :visible.sync="dialogFormVisible_addZongbu">
          <el-form :model="zengjiazongbuAddForm">
            <table>
              <tr>
                <td class="bianji_td_jian">总部编码:</td>
                <td class="bianji_td_zhi">
                  <el-input v-model="zengjiazongbuAddForm.zongbu_bianma" autocomplete="off"
                            style="width: 150px;margin: 10px 0 0 10px"></el-input>
                </td>
                <td class="bianji_td_jian">总部名称:</td>
                <td class="bianji_td_zhi">
                  <el-input v-model="zengjiazongbuAddForm.zongbu_name" autocomplete="off"
                            style="width: 150px;margin: 10px 0 0 10px"></el-input>
                </td>
                <td class="bianji_td_jian">区域:</td>
                <td class="bianji_td_zhi">
                  <el-input v-model="zengjiazongbuAddForm.zongbu_region" autocomplete="off"
                            style="width: 150px;margin: 10px 0 0 10px"></el-input>
                </td>
              </tr>

              <tr>
                <td class="bianji_td_jian">门店状态:</td>
                <td class="bianji_td_zhi">
                  <el-select v-model="zengjiazongbuAddForm.mendian_status" @change="select_gongsi"
                             style="width: 150px;margin: 10px 0 0 10px" placeholder="门店状态">
                    <el-option
                      v-for="item in mendian_status_opt"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </td>

                <td class="bianji_td_jian">联系人:</td>
                <td class="bianji_td_zhi">
                  <el-input v-model="zengjiazongbuAddForm.zongbu_contact" autocomplete="off"
                            style="width: 150px;margin: 10px 0 0 10px"></el-input>
                </td>
                <td class="bianji_td_jian">电话:</td>
                <td class="bianji_td_zhi">
                  <el-input v-model="zengjiazongbuAddForm.zongbu_phone" autocomplete="off"
                            style="width: 150px;margin: 10px 0 0 10px"></el-input>
                </td>
              </tr>
              <tr>
                <td class="bianji_td_jian">传真:</td>
                <td class="bianji_td_zhi">
                  <el-input v-model="zengjiazongbuAddForm.zongbu_fax" autocomplete="off"
                            style="width: 150px;margin: 10px 0 0 10px"></el-input>
                </td>

                <td class="bianji_td_jian">省份:</td>
                <td class="bianji_td_zhi">
                  <el-input v-model="zengjiazongbuAddForm.zongbu_province" autocomplete="off"
                            style="width: 150px;margin: 10px 0 0 10px"></el-input>
                </td>
                <td class="bianji_td_jian">城市:</td>
                <td class="bianji_td_zhi">
                  <el-input v-model="zengjiazongbuAddForm.zongbu_city" autocomplete="off"
                            style="width: 150px;margin: 10px 0 0 10px"></el-input>
                </td>
              </tr>
              <tr>
                <td class="bianji_td_jian">区/镇:</td>
                <td class="bianji_td_zhi">
                  <el-input v-model="zengjiazongbuAddForm.zongbu_district" autocomplete="off"
                            style="width: 150px;margin: 10px 0 0 10px"></el-input>
                </td>
                <td class="bianji_td_jian">地址:</td>
                <td class="bianji_td_zhi" colspan="3">
                  <el-input v-model="zengjiazongbuAddForm.zongbu_address" autocomplete="off"
                            style="width: 270px;margin: 10px 0 0 10px"></el-input>
                </td>
              </tr>
            </table>

          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="closeAddzongbu">取 消</el-button>
            <el-button type="primary" @click="closeAddzongbu">确 定</el-button>
          </div>
        </el-dialog>

        <!--总部编辑弹窗-->
        <el-dialog title="编辑总部" :visible.sync="dialogFormVisible_editZongbu">
          <el-form :model="bianjizongbuEditForm">
            <table>
              <tr>
                <td class="bianji_td_jian">总部编码:</td>
                <td class="bianji_td_zhi">
                  <el-input v-model="bianjizongbuEditForm.zongbu_bianma" autocomplete="off"
                            style="width: 150px;margin: 10px 0 0 10px"></el-input>
                </td>
                <td class="bianji_td_jian">总部名称:</td>
                <td class="bianji_td_zhi">
                  <el-input v-model="bianjizongbuEditForm.zongbu_name" autocomplete="off"
                            style="width: 150px;margin: 10px 0 0 10px"></el-input>
                </td>
                <td class="bianji_td_jian">区域:</td>
                <td class="bianji_td_zhi">
                  <el-input v-model="bianjizongbuEditForm.zongbu_region" autocomplete="off"
                            style="width: 150px;margin: 10px 0 0 10px"></el-input>
                </td>
              </tr>

              <tr>
                <td class="bianji_td_jian">门店状态:</td>
                <td class="bianji_td_zhi">
                  <el-select disabled v-model="bianjizongbuEditForm.mendian_status" @change="select_gongsi"
                             style="width: 150px;margin: 10px 0 0 10px" placeholder="门店状态">
                    <el-option
                      v-for="item in mendian_status_opt"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </td>

                <td class="bianji_td_jian">联系人:</td>
                <td class="bianji_td_zhi">
                  <el-input v-model="bianjizongbuEditForm.zongbu_contact" autocomplete="off"
                            style="width: 150px;margin: 10px 0 0 10px"></el-input>
                </td>
                <td class="bianji_td_jian">电话:</td>
                <td class="bianji_td_zhi">
                  <el-input v-model="bianjizongbuEditForm.zongbu_phone" autocomplete="off"
                            style="width: 150px;margin: 10px 0 0 10px"></el-input>
                </td>
              </tr>
              <tr>
                <td class="bianji_td_jian">传真:</td>
                <td class="bianji_td_zhi">
                  <el-input v-model="bianjizongbuEditForm.zongbu_fax" autocomplete="off"
                            style="width: 150px;margin: 10px 0 0 10px"></el-input>
                </td>

                <td class="bianji_td_jian">省份:</td>
                <td class="bianji_td_zhi">
                  <el-input v-model="bianjizongbuEditForm.zongbu_province" autocomplete="off"
                            style="width: 150px;margin: 10px 0 0 10px"></el-input>
                </td>
                <td class="bianji_td_jian">城市:</td>
                <td class="bianji_td_zhi">
                  <el-input v-model="bianjizongbuEditForm.zongbu_city" autocomplete="off"
                            style="width: 150px;margin: 10px 0 0 10px"></el-input>
                </td>
              </tr>
              <tr>
                <td class="bianji_td_jian">区/镇:</td>
                <td class="bianji_td_zhi">
                  <el-input v-model="bianjizongbuEditForm.zongbu_district" autocomplete="off"
                            style="width: 150px;margin: 10px 0 0 10px"></el-input>
                </td>
                <td class="bianji_td_jian">地址:</td>
                <td class="bianji_td_zhi" colspan="3">
                  <el-input v-model="bianjizongbuEditForm.zongbu_address" autocomplete="off"
                            style="width: 270px;margin: 10px 0 0 10px"></el-input>
                </td>
              </tr>
            </table>

          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="closeEditzongbu">取 消</el-button>
            <el-button type="primary" @click="closeEditzongbu">确 定</el-button>
          </div>
        </el-dialog>

        <!--分店增加弹窗-->
        <el-dialog title="增加分店" :visible.sync="dialogFormVisible_addFendian">
          <el-form :model="zengjiafendianAddForm">
            <table>
              <tr>
                <td class="bianji_td_jian">总部名称:</td>
                <td class="bianji_td_zhi">
                  <el-input v-model="zengjiafendianAddForm.zongbu_name" autocomplete="off"
                            style="width: 150px;margin: 10px 0 0 10px"></el-input>
                </td>
                <td class="bianji_td_jian">分店编码:</td>
                <td class="bianji_td_zhi">
                  <el-input v-model="zengjiafendianAddForm.fendian_bianma" autocomplete="off"
                            style="width: 150px;margin: 10px 0 0 10px"></el-input>
                </td>
                <td class="bianji_td_jian">门店名称:</td>
                <td class="bianji_td_zhi">
                  <el-input v-model="zengjiafendianAddForm.fendian_name" autocomplete="off"
                            style="width: 150px;margin: 10px 0 0 10px"></el-input>
                </td>
              </tr>
              <tr>
                <td class="bianji_td_jian">区域:</td>
                <td class="bianji_td_zhi">
                  <el-input v-model="zengjiafendianAddForm.fendian_region" autocomplete="off"
                            style="width: 150px;margin: 10px 0 0 10px"></el-input>
                </td>

                <td class="bianji_td_jian">门店状态:</td>
                <td class="bianji_td_zhi">
                  <el-select v-model="zengjiafendianAddForm.fendian_status" @change="select_gongsi"
                             style="width: 150px;margin: 10px 0 0 10px" placeholder="门店状态">
                    <el-option
                      v-for="item in mendian_status_opt"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </td>

                <td class="bianji_td_jian">联系人:</td>
                <td class="bianji_td_zhi">
                  <el-input v-model="zengjiafendianAddForm.fendian_contact" autocomplete="off"
                            style="width: 150px;margin: 10px 0 0 10px"></el-input>
                </td>
              </tr>
              <tr>
                <td class="bianji_td_jian">电话:</td>
                <td class="bianji_td_zhi">
                  <el-input v-model="zengjiafendianAddForm.fendian_phone" autocomplete="off"
                            style="width: 150px;margin: 10px 0 0 10px"></el-input>
                </td>

                <td class="bianji_td_jian">传真:</td>
                <td class="bianji_td_zhi">
                  <el-input v-model="zengjiafendianAddForm.fendian_fax" autocomplete="off"
                            style="width: 150px;margin: 10px 0 0 10px"></el-input>
                </td>

                <td class="bianji_td_jian">省份:</td>
                <td class="bianji_td_zhi">
                  <el-input v-model="zengjiafendianAddForm.fendian_province" autocomplete="off"
                            style="width: 150px;margin: 10px 0 0 10px"></el-input>
                </td>
              </tr>
              <tr>
                <td class="bianji_td_jian">城市:</td>
                <td class="bianji_td_zhi">
                  <el-input v-model="zengjiafendianAddForm.fendian_city" autocomplete="off"
                            style="width: 150px;margin: 10px 0 0 10px"></el-input>
                </td>
                <td class="bianji_td_jian">区/镇:</td>
                <td class="bianji_td_zhi">
                  <el-input v-model="zengjiafendianAddForm.fendian_district" autocomplete="off"
                            style="width: 150px;margin: 10px 0 0 10px"></el-input>
                </td>
                <td class="bianji_td_jian">楼层:</td>
                <td class="bianji_td_zhi">
                  <el-input v-model="zengjiafendianAddForm.fendian_floor" autocomplete="off"
                            style="width: 150px;margin: 10px 0 0 10px"></el-input>
                </td>
              </tr>
              <tr>
                <td class="bianji_td_jian">地址:</td>
                <td class="bianji_td_zhi" colspan="3">
                  <el-input v-model="zengjiafendianAddForm.fendian_address" autocomplete="off"
                            style="width: 270px;margin: 10px 0 0 10px"></el-input>
                </td>
              </tr>
            </table>

          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="closeAddfendian">取 消</el-button>
            <el-button type="primary" @click="closeAddfendian">确 定</el-button>
          </div>
        </el-dialog>

        <!--分店编辑弹窗-->
        <el-dialog title="编辑分店" :visible.sync="dialogFormVisible_editFendian">
          <el-form :model="bianjifendianEditForm">
            <table>
              <tr>
                <td class="bianji_td_jian">总部名称:</td>
                <td class="bianji_td_zhi">
                  <el-input v-model="bianjifendianEditForm.zongbu_name" autocomplete="off"
                            style="width: 150px;margin: 10px 0 0 10px"></el-input>
                </td>
                <td class="bianji_td_jian">分店编码:</td>
                <td class="bianji_td_zhi">
                  <el-input v-model="bianjifendianEditForm.fendian_bianma" autocomplete="off"
                            style="width: 150px;margin: 10px 0 0 10px"></el-input>
                </td>
                <td class="bianji_td_jian">门店名称:</td>
                <td class="bianji_td_zhi">
                  <el-input v-model="bianjifendianEditForm.fendian_name" autocomplete="off"
                            style="width: 150px;margin: 10px 0 0 10px"></el-input>
                </td>
              </tr>
              <tr>
                <td class="bianji_td_jian">区域:</td>
                <td class="bianji_td_zhi">
                  <el-input v-model="bianjifendianEditForm.fendian_region" autocomplete="off"
                            style="width: 150px;margin: 10px 0 0 10px"></el-input>
                </td>

                <td class="bianji_td_jian">门店状态:</td>
                <td class="bianji_td_zhi">
                  <el-select disabled v-model="bianjifendianEditForm.fendian_status" @change="select_gongsi"
                             style="width: 150px;margin: 10px 0 0 10px" placeholder="门店状态">
                    <el-option
                      v-for="item in mendian_status_opt"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </td>

                <td class="bianji_td_jian">联系人:</td>
                <td class="bianji_td_zhi">
                  <el-input v-model="bianjifendianEditForm.fendian_contact" autocomplete="off"
                            style="width: 150px;margin: 10px 0 0 10px"></el-input>
                </td>
              </tr>
              <tr>
                <td class="bianji_td_jian">电话:</td>
                <td class="bianji_td_zhi">
                  <el-input v-model="bianjifendianEditForm.fendian_phone" autocomplete="off"
                            style="width: 150px;margin: 10px 0 0 10px"></el-input>
                </td>

                <td class="bianji_td_jian">传真:</td>
                <td class="bianji_td_zhi">
                  <el-input v-model="bianjifendianEditForm.fendian_fax" autocomplete="off"
                            style="width: 150px;margin: 10px 0 0 10px"></el-input>
                </td>

                <td class="bianji_td_jian">省份:</td>
                <td class="bianji_td_zhi">
                  <el-input v-model="bianjifendianEditForm.fendian_province" autocomplete="off"
                            style="width: 150px;margin: 10px 0 0 10px"></el-input>
                </td>
              </tr>
              <tr>
                <td class="bianji_td_jian">城市:</td>
                <td class="bianji_td_zhi">
                  <el-input v-model="bianjifendianEditForm.fendian_city" autocomplete="off"
                            style="width: 150px;margin: 10px 0 0 10px"></el-input>
                </td>
                <td class="bianji_td_jian">区/镇:</td>
                <td class="bianji_td_zhi">
                  <el-input v-model="bianjifendianEditForm.fendian_district" autocomplete="off"
                            style="width: 150px;margin: 10px 0 0 10px"></el-input>
                </td>
                <td class="bianji_td_jian">楼层:</td>
                <td class="bianji_td_zhi">
                  <el-input v-model="bianjifendianEditForm.fendian_floor" autocomplete="off"
                            style="width: 150px;margin: 10px 0 0 10px"></el-input>
                </td>
              </tr>
              <tr>
                <td class="bianji_td_jian">地址:</td>
                <td class="bianji_td_zhi" colspan="3">
                  <el-input v-model="bianjifendianEditForm.fendian_address" autocomplete="off"
                            style="width: 270px;margin: 10px 0 0 10px"></el-input>
                </td>
              </tr>
            </table>

          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="closeEditfendian">取 消</el-button>
            <el-button type="primary" @click="closeEditfendian">确 定</el-button>
          </div>
        </el-dialog>

        <!--柜台增加弹窗-->
        <el-dialog title="增加柜台" :visible.sync="dialogFormVisible_addGuitai">
          <el-form :model="zengjiaguitaiAddForm">
            <table class="motai-kuang">
              <tr>
                <td class="bianji_td_jian">门店名称：</td>
                <td class="bianji_td_jian">
                  <el-input v-model="zengjiaguitaiAddForm.storeName" autocomplete="off"
                            style="width: 150px;margin-left: 10px"></el-input>
                </td>
                <td class="bianji_td_jian">柜台名称：</td>
                <td class="bianji_td_jian">
                  <el-input v-model="zengjiaguitaiAddForm.counterName" autocomplete="off"
                            style="width: 150px;margin-left: 10px"></el-input>
                </td>
                <td class="bianji_td_jian">柜台状态：</td>
                <td class="bianji_td_jian">
                  <el-input v-model="zengjiaguitaiAddForm.counterStatus" autocomplete="off"
                            style="width: 150px;margin-left: 10px"></el-input>
                </td>
              </tr>
              <tr>
                <td class="bianji_td_jian">柜台商品品类：</td>
                <td class="bianji_td_jian">
                  <el-input v-model="zengjiaguitaiAddForm.counterCategory" autocomplete="off"
                            style="width: 150px;margin-left: 10px"></el-input>
                </td>
              </tr>
            </table>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible_addGuitai = false">取 消</el-button>
            <el-button type="primary" @click="dialogFormVisible_addGuitai = false">确 定</el-button>
          </div>

        </el-dialog>

        <!--柜台编辑弹窗-->
        <el-dialog title="编辑柜台" :visible.sync="dialogFormVisible_editGuitai">
          <el-form :model="bianjiguitaiEditForm">
            <table class="motai-kuang">
              <tr>
                <td class="bianji_td_jian">门店名称：</td>
                <td class="bianji_td_jian">
                  <el-input v-model="bianjiguitaiEditForm.storeName" autocomplete="off"
                            style="width: 150px;margin-left: 10px"></el-input>
                </td>
                <td class="bianji_td_jian">柜台名称：</td>
                <td class="bianji_td_jian">
                  <el-input v-model="bianjiguitaiEditForm.counterName" autocomplete="off"
                            style="width: 150px;margin-left: 10px"></el-input>
                </td>
                <td class="bianji_td_jian">柜台状态：</td>
                <td class="bianji_td_jian">
                  <el-input disabled v-model="bianjiguitaiEditForm.counterStatus" autocomplete="off"
                            style="width: 150px;margin-left: 10px"></el-input>
                </td>
              </tr>
              <tr>
                <td class="bianji_td_jian">柜台商品品类：</td>
                <td class="bianji_td_jian">
                  <el-input v-model="bianjiguitaiEditForm.counterCategory" autocomplete="off"
                            style="width: 150px;margin-left: 10px"></el-input>
                </td>
              </tr>
            </table>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible_editGuitai = false">取 消</el-button>
            <el-button type="primary" @click="dialogFormVisible_editGuitai = false">确 定</el-button>
          </div>

        </el-dialog>
      </div>
    </div>

  </div>


</template>

<script>
  export default {
    name: "store_basic_settings",
    data() {
      return {


        //总部
        zongbu: [
//          {
//            value: '公司总部',
//            label: '公司总部'
//          },
//          {
//            value: '上海分公司',
//            label: '上海分公司'
//          }
        ],
        zongbu_value: "",
        //柜台信息
        guitaixinxi: {
          storeName: "",
          name: "",
          status: "",
          category: "",
        },
        //分店信息
        fendianxinxi: {
          id: "",
          headquartersName: "",   //总部名称
          coding: "",
          name: "",
          region: "",
          storeStatus: "",
          contact: "",
          phone: "",
          fax: "",
          province: "",
          city: "",
          district: "",
          floor: "",
          address: "",
        },

        //公司信息
        zongbuxinxi: {
          id: "",
          coding: "",
          name: "",
          region: "",
          storeStatus: "",
          contact: "",
          phone: "",
          fax: "",
          province: "",
          city: "",
          district: "",
          address: "",
        },
        "tableData": [
          {
            "id": 1,
            "coding": "BJZB",
            "name": "北京总部",
            "region": "北京",
            "storeStatus": "营业中",
            "contact": "xxx",
            "phone": "xxxxxxxx",
            "fax": "xxxxxx",
            "province": "北京",
            "city": "北京市",
            "district": "朝阳区",
            "address": "xxxxxxxxxxxxxxx"
          }],
        //增加总部
        zengjiazongbuAddForm: {
          zongbu_bianma: "",
          zongbu_name: "",
          zongbu_region: "",
          mendian_status: "",
          zongbu_contact: "",
          zongbu_phone: "",
          zongbu_fax: "",
          zongbu_province: "",
          zongbu_city: "",
          zongbu_district: "",
          zongbu_address: "",
        },
        mendian_status_opt: [
          {
            value: '营业中',
            label: '营业中'
          },
          {
            value: '休业中',
            label: '休业中'
          }
        ],
        //编辑总部
        bianjizongbuEditForm: {
          zongbu_bianma: "",
          zongbu_name: "",
          zongbu_region: "",
          mendian_status: "",
          zongbu_contact: "",
          zongbu_phone: "",
          zongbu_fax: "",
          zongbu_province: "",
          zongbu_city: "",
          zongbu_district: "",
          zongbu_address: "",
        },
        //增加分店
        zengjiafendianAddForm: {
          zongbu_name: "",
          fendian_bianma: "",
          fendian_name: "",
          fendian_region: "",
          fendian_status: "",
          fendian_contact: "",
          fendian_phone: "",
          fendian_fax: "",
          fendian_province: "",
          fendian_city: "",
          fendian_district: "",
          fendian_floor: "",
          fendian_address: "",
        },
        //编辑分店
        bianjifendianEditForm: {
          zongbu_name: "",
          fendian_eara: "",
          fendian_name: "",
          fendian_status: "",
          fendian_contact: "",
          fendian_phone: "",
          fendian_fax: "",
          fendian_province: "",
          fendian_city: "",
          fendian_district: "",
          fendian_floor: "",
          fendian_address: "",
        },
        //增加柜台
        zengjiaguitaiAddForm: {
          storeName: "",
          counterName: "",
          counterStatus: "",
          counterCategory: "",
        },
        //编辑柜台
        bianjiguitaiEditForm: {
          storeName: "",
          counterName: "",
          counterStatus: "",
          counterCategory: "",
        },

        dialogFormVisible_addZongbu: false,
        dialogFormVisible_editZongbu: false,
        dialogFormVisible_addFendian: false,
        dialogFormVisible_editFendian: false,
        dialogFormVisible_addGuitai: false,
        dialogFormVisible_editGuitai: false,

        form: {
          name: '',
          region: '',
          delivery: false,
          type: [],
          resource: '',
          desc: ''
        },
        data: [
          {}
        ],
        formLabelWidth: '420px',
        formInline: {
          user: '',
          company: '',
          branch: '',
          counter: ''
        },
        // headquarters_store_code: "",//总部编码
        // headquarters_store_name: "",//总部名称
        // headquarters_store_status: "",//公司状态
        // headquarters_store_contact: "",//联系人
        // headquarters_store_tel: "",//电话
        // headquarters_store_fax: "",//传真
        // headquarters_store_adrress: "",//地址
        // region: "",//区域
        // province: "",//省份
        // city: "",//城市
        // district: "",//区/镇


        Selectcompany: "",
        informationlist: "",
        fendian_value: ""
      }
    },
    methods: {
      onSubmit() {
        console.log('submit!');
      },
      addZongbu() {
        var obj = new Object()

      },
//      门店的选择
//      如果需要添加，就进行if判断进行添加
      select_gongsi() {
        this.zongbuxinxi = this.tableData[0];
        console.log(111);
        this.$axios.get("http://172.16.6.56:8080/commodityaction").then(
          (res) => {
            this.fendian = [];
            console.log(12321)
            console.log(res.data.data);
            for (var z = 0; z <= res.data.data.headquartersStoreList.length; z++) {
              if (this.zongbu_value == res.data.data.headquartersStoreList[z].storeName) {
                console.log(this.zongbu_value);
                console.log(222);
                console.log(res.data.data.headquartersStoreList[z].headquartersStores);

                for (var i = 0; i <= res.data.data.headquartersStoreList[z].headquartersStores.length; i++) {
                  var obj = new Object();
                  obj.value = res.data.data.headquartersStoreList[z].headquartersStores[i].storeName;
                  obj.label = res.data.data.headquartersStoreList[z].headquartersStores[i].storeName;
                  this.fendian.push(obj);
                  console.log(333);
                  console.log(obj);
                }
                console.log(231)
                console.log(this.fendian);

                console.log(444);
                console.log(res)
                // if(res.data.data.headquartersStoreList[z].headquartersStores[i].counters[y].name)
                for (var y = 0; y <= res.data.data.headquartersStoreList[z].headquartersStores[i].counters.length; y++) {
                  var obj = new Object();
                  obj.value = res.data.data.headquartersStoreList[z].headquartersStores[i].counters[y].name;
                  obj.label = res.data.data.headquartersStoreList[z].headquartersStores[i].counters[y].name;
                  this.chukuguitai.push(obj)
                }
                console.log(this.fendian)
                this.fendian_value
              }

            }
          }
        )
      },


//        this.$axios.get("http://172.16.6.56:8080/commodityaction").then(
//          (res)=>{
//            console.log(res.data.data.headquartersStoreList);
//
//        for(var i=0;i<res.data.data.headquartersStoreList.length;i++){
//          var obj=new Object();
//          obj.value=res.data.data.headquartersStoreList[i].headquarters_store_name;
//          obj.label=res.data.data.headquartersStoreList[i].headquarters_store_name;
//          this.zongbu.push(obj);
//          console.log(this.zongbu)
//        }
//
//        }
//
//        )


//      柜台的选择。如果需要添加，就进行if判断进行添加
//       fendianxuanze(){
//         if(this.fendian_value=="望京众运店"){
//           var obj2=new Object
//           obj2.value= '柜台06';
//           obj2.label= '柜台06';
//           this.chukuguitai.push(obj2);
//           console.log(this.chukuguitai)
//         };
//       },

      openAddzongbu() {
        this.dialogFormVisible_addZongbu = true;
      },
      closeAddzongbu() {
        this.dialogFormVisible_addZongbu = false;
      },
      openEditzongbu() {
        this.dialogFormVisible_editZongbu = true;
      },
      closeEditzongbu() {
        this.dialogFormVisible_editZongbu = false;
      },
      openAddfendian() {
        this.dialogFormVisible_addFendian = true;
      },
      closeAddfendian() {
        this.dialogFormVisible_addFendian = false;
      },
      openEditfendian() {
        this.dialogFormVisible_editFendian = true;
      },
      closeEditfendian() {
        this.dialogFormVisible_editFendian = false;
      },

      pickinformation() {

      }
    },
    //获取总部的信息
    beforeMount() {
      this.$axios.get("http://172.16.6.56:8080/commodityaction").then(
        (res) => {
          console.log(res)
          console.log(res.data.data.headquartersStoreList);

          for (var i = 0; i < res.data.data.headquartersStoreList.length; i++) {
            let obj = new Object();
            obj.value = res.data.data.headquartersStoreList[i].storeName;
            obj.label = res.data.data.headquartersStoreList[i].storeName;
            this.zongbu.push(obj);
          }
          console.log(123)
          console.log(this.zongbu)
//      for (var z=0;z<obj.length;z++){
//        if (obj[z].value=="公司总部"){
//              this.fendian={
//                value: '望京众运店',
//                label: '望京众运店'
//              }
//        }
//      }

        })
    }
//     beforeMount() {
//       this.$axios.get("http://172.16.6.56:8080/commodityaction", {}).then(
//         (res) => {
//           console.log(res.data.data);
//           console.log(res.data.data.headquartersStoreList[0].headquarters_store_code);
//           for (var i = 0; i < res.data.data.headquartersStoreList.length; i++) {
//             res.data.data.headquartersStoreList[i]
//           }
//           //数据绑定，修改。
//           let ZBanmiontion = res.data.data.headquartersStoreList[0];
//           this.headquarters_store_code = ZBanmiontion.headquarters_store_code;
//           this.headquarters_store_name = ZBanmiontion.headquarters_store_name;
//           this.headquarters_store_status = ZBanmiontion.headquarters_store_status;
//           this.headquarters_store_contact = ZBanmiontion.headquarters_store_contact;
//           this.headquarters_store_tel = ZBanmiontion.headquarters_store_tel;
//           this.headquarters_store_fax = ZBanmiontion.headquarters_store_fax;
//           this.headquarters_store_adrress = ZBanmiontion.headquarters_store_adrress;
//           this.region = ZBanmiontion.headquarters_store_adrress.slice(3, 5);
//           this.province = ZBanmiontion.headquarters_store_adrress.slice(0, 3);
//           this.city = ZBanmiontion.headquarters_store_adrress.slice(3, 6);
//           this.district = ZBanmiontion.headquarters_store_adrress.slice(6, 9);
//           console.log(this.district);
//         }
//       )
//     },
  }
</script>

<style scoped>
  .bianji_td_jian {
    width: 120px;
    text-align: right;
  }

  .caozuo {
    height: 50px;
    /*border: 1px solid red;*/
    margin-left: 72%;
  }

  .Breadcrumb {
    font-size: 12px;
    margin-top: 10px;
    margin-left: 10px;
    color: #999999;
  }

  .Breadcrumb span {
    margin-left: 10px;
  }

  .shenpi_td_jian {
    width: 70px;
    text-align: center;
    font-size: 14px;
    color: #8C8B8D;
  }

  .shenpi_td_zhi {
    width: 110px;
    font-size: 16px;
    padding-left: 20px;
  }

  .table_pad {
    padding: 0 15px 0 15px;
    margin-left: 20px;
    margin-top: 20px;
    height: 700px;
    width: 96%;
    background-color: white;
  }

  .Breadcrumb span:nth-of-type(1) {
    color: #3380FF;
  }

  .permission_text {
    font-size: 30px;
    padding-top: 20px;
    padding-left: 15px;
  }

  .add-headquarters {
    position: absolute;
    right: 0;
    top: 0;
  }

  .motai-kuang tr {
    height: 50px;
  }

  .content1 {
    background-color: #f6f6f6;
    width: 85%;
    min-height: 600px;
  }

  .content1-1 {
    position: relative;
    top: 10px;
    height: 50px;

  }

  .pop-up {
    position: relative;
    top: 10px;
    border: 1px solid #cccccc;
    margin-top: 20px;
    border-radius: 5px;
  }

  /*}*/
  .pop-up tr > td {
    /*border: 1px solid ;*/
    width: 181px;
    height: 50px;
  }

  .pop-up-header {
    /*border: 1px solid red;*/
    text-align: center;
    border-radius: 5px 5px 0 0;
    height: 35px;
    background-color: #71B6FF;
    color: #FBFBFB;
    line-height: 35px;
    margin-bottom: 20px;
  }

  table input {
    width: 170px;
  }

  .guitai {
    position: relative;
    top: 20px;
    border: 1px solid #000000;
  }

  .guitai-h4 {
    text-align: center;
  }

  .guitai input {
    width: 154px;
  }
</style>
